<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>用户注册</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="text/javascript" src="/assets/login/lib/iframe-resizer-3.6.3/iframeResizer.contentWindow.min.js"></script>
  <link href="/sitefiles/assets/lib/elementui/default/index.css" rel="stylesheet" type="text/css" />
  <link href="/sitefiles/assets/css/element-ui.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="main">
    <template v-if="pageType === 'form'">

      <el-form ref="form" :model="form" size="medium" label-width="100px" status-icon>
        <el-form-item label="用户名" prop="userName" :rules="[{ required: true, message: '请输入用户名' }]">
          <el-input v-model="form.userName"></el-input>
          <small class="tips">用户名是用户的唯一标识，注册后无法更改</small>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' }]">
          <el-input v-model="form.password" type="password" name="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" :rules="[{ required: true, message: '请输入确认密码' }, { validator: validatePass }]">
          <el-input v-model="form.confirmPassword" type="password" name="confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="isUserRegistrationGroup" label="用户组" prop="groupId" :rules="[{ required: true, message: '请选择用户组' }]">
          <el-select v-model="form.groupId" placeholder="请选择">
            <el-option
              v-for="group in groups"
              :key="group.id"
              :label="group.groupName"
              :value="group.id"></el-option>
          </el-select>
        </el-form-item>

        <template v-for="style in styles" :key="style.attributeName">
          <!-- Image -->
          <template v-if="style.inputType === 'Image'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-button-group>
                <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传图片', name: 'formLayerImageUpload', attributeName: style.attributeName, no: 0})">
                  上传
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择图片素材', name: 'materialLayerImageSelect', attributeName: style.attributeName, no: 0, full: true})">
                  选择
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="form[utils.toCamelCase(style.attributeName)] ? false : true" v-on:click="btnExtendPreviewClick(style.attributeName, 0)">
                  预览
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="form[utils.getCountName(style.attributeName)] === 0" v-on:click="btnExtendAddClick(style)">
                  新增
                </el-button>
              </el-button-group>
              <el-input
                v-model="form[utils.toCamelCase(style.attributeName)]"
                size="small"
                :placeholder="style.helpText || '请输入图片地址或点击上方按钮上传'">
              </el-input>
              <template v-for="n in form[utils.getCountName(style.attributeName)]">
                <el-button-group>
                  <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传图片', name: 'formLayerImageUpload', attributeName: style.attributeName, no: n})">
                    上传
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择图片素材', name: 'materialLayerImageSelect', attributeName: style.attributeName, no: n, full: true})">
                    选择
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="form[utils.getExtendName(style.attributeName, n)] ? false : true" v-on:click="btnExtendPreviewClick(style.attributeName, n)">
                    预览
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendAddClick(style)">
                    新增
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-remove-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendRemoveClick(style)">
                    删除
                  </el-button>
                </el-button-group>
                <el-input
                  v-model="form[utils.getExtendName(style.attributeName, n)]"
                  size="small"
                  :placeholder="style.helpText || '请输入图片地址或点击上方按钮上传'">
                </el-input>
              </template>
            </el-form-item>
          </template>
          <!-- File -->
          <template v-else-if="style.inputType === 'File'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-button-group>
                <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传附件', name: 'formLayerFileUpload', attributeName: style.attributeName, no: 0})">
                  上传
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择附件素材', name: 'materialLayerFileSelect', attributeName: style.attributeName, no: 0, full: true})">
                  选择
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="form[utils.getCountName(style.attributeName)] === 0" v-on:click="btnExtendAddClick(style)">
                  新增
                </el-button>
              </el-button-group>
              <el-input
                v-model="form[utils.toCamelCase(style.attributeName)]"
                size="small"
                :placeholder="style.helpText || '请输入附件地址或点击上方按钮上传'">
              </el-input>
              <template v-for="n in form[utils.getCountName(style.attributeName)]">
                <el-button-group>
                  <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传附件', name: 'formLayerFileUpload', attributeName: style.attributeName, no: n})">
                    上传
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择附件素材', name: 'materialLayerFileSelect', attributeName: style.attributeName, no: n, full: true})">
                    选择
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendAddClick(style)">
                    新增
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-remove-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendRemoveClick(style)">
                    删除
                  </el-button>
                </el-button-group>
                <el-input
                  v-model="form[utils.getExtendName(style.attributeName, n)]"
                  size="small"
                  :placeholder="style.helpText || '请输入附件地址或点击上方按钮上传'">
                </el-input>
              </template>
            </el-form-item>
          </template>
          <!-- Video -->
          <template v-else-if="style.inputType === 'Video'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-button-group>
                <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传视频', name: 'formLayerVideoUpload', attributeName: style.attributeName, no: 0})">
                  上传
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择视频素材', name: 'materialLayerVideoSelect', attributeName: style.attributeName, no: 0, full: true})">
                  选择
                </el-button>
                <el-button size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="form[utils.getCountName(style.attributeName)] === 0" v-on:click="btnExtendAddClick(style)">
                  新增
                </el-button>
              </el-button-group>
              <el-input
                v-model="form[utils.toCamelCase(style.attributeName)]"
                size="small"
                :placeholder="style.helpText || '请输入视频地址或点击上方按钮上传'">
              </el-input>
              <template v-for="n in form[utils.getCountName(style.attributeName)]">
                <el-button-group>
                  <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传视频', name: 'formLayerVideoUpload', attributeName: style.attributeName, no: n})">
                    上传
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择视频素材', name: 'materialLayerVideoSelect', attributeName: style.attributeName, no: n, full: true})">
                    选择
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendAddClick(style)">
                    新增
                  </el-button>
                  <el-button size="mini" type="info" icon="el-icon-remove-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendRemoveClick(style)">
                    删除
                  </el-button>
                </el-button-group>
                <el-input
                  v-model="form[utils.getExtendName(style.attributeName, n)]"
                  size="small"
                  :placeholder="style.helpText || '请输入视频地址或点击上方按钮上传'">
                </el-input>
              </template>
            </el-form-item>
          </template>
          <!-- TextEditor -->
          <template v-else-if="style.inputType === 'TextEditor'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-button-group style="margin-bottom: 2px;">
                <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '导入Word', name: 'editorLayerWord', attributeName: style.attributeName})">
                  导入Word
                </el-button>
                <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入图片', name: 'editorLayerImage', attributeName: style.attributeName})">
                  插入图片
                </el-button>
                <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入视频', name: 'editorLayerVideo', attributeName: style.attributeName})">
                  插入视频
                </el-button>
                <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入音频', name: 'editorLayerAudio', attributeName: style.attributeName})">
                  插入音频
                </el-button>
                <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入附件', name: 'editorLayerFile', attributeName: style.attributeName})">
                  插入附件
                </el-button>
                <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入图文', name: 'editorLayerArticle', attributeName: style.attributeName, full: true})">
                  插入图文
                </el-button>
              </el-button-group>
              <textarea
                :id="style.attributeName"
                :name="style.attributeName"
                v-html="form[utils.toCamelCase(style.attributeName)]"
                style="width: 100%;">
              </textarea>
              <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
            </el-form-item>
          </template>
          <!-- TextArea -->
          <template v-else-if="style.inputType === 'TextArea'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-input
                v-model="form[utils.toCamelCase(style.attributeName)]"
                type="textarea"
                size="small"
                :placeholder="style.helpText"
                :autosize="{ minRows: 4, maxRows: 10}">
              </el-input>
            </el-form-item>
          </template>
          <!-- Text -->
          <template v-else-if="style.inputType === 'Text'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-input v-model="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText"></el-input>
            </el-form-item>
          </template>
          <!-- Number -->
          <template v-else-if="style.inputType === 'Number'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-input v-model.number="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText"></el-input>
            </el-form-item>
          </template>
          <!-- CheckBox -->
          <template v-else-if="style.inputType === 'CheckBox'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-checkbox-group v-model="form[utils.toCamelCase(style.attributeName)]">
                <el-checkbox v-for="item in style.items" :key="item.value" :label="item.label" :value="item.value"></el-checkbox>
              </el-checkbox-group>
              <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
            </el-form-item>
          </template>
          <!-- Radio -->
          <template v-else-if="style.inputType === 'Radio'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-radio-group v-model="form[utils.toCamelCase(style.attributeName)]">
                <el-radio v-for="item in style.items" :key="item.value" :label="item.label" :value="item.value"></el-radio>
              </el-radio-group>
              <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
            </el-form-item>
          </template>
          <!-- SelectOne -->
          <template v-else-if="style.inputType === 'SelectOne'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-select v-model="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText || '请选择'">
                <el-option
                  v-for="item in style.items"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- SelectMultiple -->
          <template v-else-if="style.inputType === 'SelectMultiple'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-select v-model="form[utils.toCamelCase(style.attributeName)]" multiple :placeholder="style.helpText || '请选择'">
                <el-option
                  v-for="item in style.items"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- Date -->
          <template v-else-if="style.inputType === 'Date'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-date-picker
                v-model="form[utils.toCamelCase(style.attributeName)]"
                type="date"
                :placeholder="style.helpText || '请选择日期'">
              </el-date-picker>
            </el-form-item>
          </template>
          <!-- DateTime -->
          <template v-else-if="style.inputType === 'DateTime'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-date-picker
                v-model="form[utils.toCamelCase(style.attributeName)]"
                type="datetime"
                :placeholder="style.helpText || '请选择日期时间'">
              </el-date-picker>
            </el-form-item>
          </template>
        </template>

        <el-form-item label="验证码" prop="captcha" :rules="[{ required: true, message: '请输入验证码' }]">
          <el-input v-model="form.captcha" placeholder="请输入验证码"></el-input>
          <div style="margin-top: 5px;">
            <a href="javascript:;" v-on:click="apiCaptchaReload">
              <img v-show="captchaUrl" style="display: none" class="float-right rounded" :src="captchaUrl" align="absmiddle">
            </a>
          </div>
        </el-form-item>
        <el-divider></el-divider>
        <div style="height: 10px"></div>
        <el-form-item>
          <div v-if="isHomeAgreement">
            <el-checkbox v-model="isAgreement" style="margin-right: 10px; margin-bottom: 5px;">
              <span v-html="homeAgreementHtml"></span>
            </el-checkbox>
          </div>
          <el-button type="primary" :disabled="isHomeAgreement && !isAgreement" v-on:click="btnRegisterClick">注册</el-button>
          <!-- <el-link :href="utils.getRootUrl('login')" icon="el-icon-user" type="primary" :underline="false" style="margin-left: 10px">已有账号，请登录</el-link> -->
        </el-form-item>

      </el-form>

    </template>
    <template v-else-if="pageType === 'success'">

      <div role="alert" class="el-alert el-alert--success is-light" style="padding: 15px">
        <i class="el-alert__icon el-icon-success is-big"></i>
        <div class="el-alert__content">
          <span class="el-alert__title is-bold">
            {{ successMessage }}
          </span>
        </div>
      </div>

    </template>
    <template v-else>
      <el-row style="margin-top: 100px; text-align: center">
        <img src="/assets/login/images/loading.gif" />
        <p>载入中，请稍后...</p>
      </el-row>
    </template>
  </div>
</body>

</html>

<script src="/sitefiles/assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/axios-0.17.1.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/core-js-3.6.5.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/elementui/index.js"></script>
<script src="/sitefiles/assets/js/plugin.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/utils.js" type="text/javascript"></script>
<script src="/assets/login/register.js" type="text/javascript"></script>
